<template>
    <div class="father">
        <h3>父组件</h3>
        <div class="category">
            <Category>

                <template #s1>
                    <h2>游戏列表</h2>
                </template>

                <template #s2>
                    <ul>
                        <li v-for="index in listTitles" :key="index.id">
                            {{ index.id }} ---- {{ index.title }}
                        </li>
                    </ul>
                </template>

                <template #s>
                    <p>热门游戏排行</p>
                </template>
            </Category>
            <Category>

                <!-- 通过v-slot设置名称 -->
                <template v-slot:s>
                    <p>好吃么？</p>
                </template>


                <template v-slot:s1>
                    <h2>美食专家</h2>
                </template>


                <template v-slot:s2>
                    <img :src="url">
                </template>
            </Category>
        </div>

    </div>
</template>

<script setup lang="ts" name="Slot">
import { reactive, ref } from 'vue';
import Category from "@/components/demo8/Category.vue";


let listTitles = reactive([
    { id: Math.random(), title: '极品飞车' }, { id: Math.random(), title: '王者荣耀' },
    { id: Math.random(), title: '梦幻西游' }, { id: Math.random(), title: '地下城与勇士' }
])

let url = 'https://z1.ax1x.com/2023/11/19/piNxL04.jPg';

</script>

<style scoped>
.father {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px 0;
    background-color: #f9f9f9;
}

.category {
    display: flex;
    justify-content: space-evenly;
}
</style>
